<template>
    <div class="parents_replay">
        <!-- 父评论组件 -->
        <!-- 自己调用自己 -->
        <Parent
            :parentData="parentData.parent"
            v-if="parentData.parent"
            @parentCallReply="parentCallReply"
        />
        <div class="parent_replay">
            <div class="parentuser">
                {{parentData.account.nickname}}
                <span>{{parentData.account.created_at | formatDate}}</span>
                <i class="numeber">{{parentData.level}}</i>
            </div>
            <div class="mianContent">
                <div class="mian_pic" v-if="parentData.pics.length">
                    <img :src="$axios.defaults.baseURL+parentData.pics[0].url" alt />
                </div>
                <div class="cmt_message">{{parentData.content}}</div>
            </div>
            <div class="callreplay">
                <a href="JavaScript:;" @click="callReplay(parentData.account.nickname)">回复</a>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    // 声明个name属性
    name: "Parent",
    props: ["parentData"],
    data() {
        return {
            index: 2,
        };
    },
    mounted() {
        // console.log(this.parentData);
    },
    filters: {
        formatDate: function (value) {
            // 时间戳转换日期格式方法
            if (value == null) {
                return "";
            } else {
                let date = new Date(value);
                let y = date.getFullYear(); // 年
                let MM = date.getMonth() + 1; // 月
                MM = MM < 10 ? "0" + MM : MM;
                let d = date.getDate(); // 日
                d = d < 10 ? "0" + d : d;
                let h = date.getHours(); // 时
                h = h < 10 ? "0" + h : h;
                let m = date.getMinutes(); // 分
                m = m < 10 ? "0" + m : m;
                let s = date.getSeconds(); // 秒
                s = s < 10 ? "0" + s : s;
                return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
            }
        },
    },
    methods: {
        // 点击回复按钮
        callReplay(nickname) {
            // 将自己的ID传递给上一级评论组件
            // console.log(this.parentData.id);
            this.$emit("parentCallReply", this.parentData.id, nickname);
            // console.log(nickname);
        },
        parentCallReply(parentId, nickname) {
            // 这里是更深层的 parent 点击的时候
            // 传递过来的 id
            // 我需要继续往外传
            this.$emit("parentCallReply", parentId, nickname);
        },
    },
};
</script>

<style lang="less" scoped>
.parents_replay {
    background: #f9f9f9;
    border: 1px solid #ddd;
    padding: 3px;
    .parent_replay {
        padding: 6px;
        .parentuser {
            font-size: 12px;
            color: #666;
            .numeber {
                float: right;
                vertical-align: top;
            }
        }
        .cmt_message {
            margin-top: 10px;
        }
    }
    .mianContent {
        margin-top: 10px;
        .mian_pic {
            width: 80px;
            height: 80px;
            border-radius: 6px;
            overflow: hidden;
            margin-right: 5px;
            margin-top: 10px;
            padding: 5px;
            border: 1px dashed #ddd;
            img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
                cursor: pointer;
            }
        }
    }
    .callreplay {
        text-align: right;
        line-height: 20px;
        font-size: 12px;
        height: 20px;
        padding-right: 10px;
        &:hover a {
            display: block;
        }
        a {
            text-decoration: none;
            display: none;
            color: #1e50a2;
            cursor: pointer;
        }
    }
}
</style>